<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader :list="list" @addTask="addTaskHandler"></TodoHeader>
    <TodoMain :list="showList" @delTask="delTaskHandler"></TodoMain>
    <!-- 这里的showList  要上下关联 -->
    <TodoFooter
      @changeTask="changeTaskHandler"
      @clearDone="clearDoneHandler"
      :list="showList"
    ></TodoFooter>
  </section>
</template>

<script>
// 引入style样式
import "./styles/base.css";
import "./styles/index.css";

// 方法步骤：
// 目标1：渲染列表
// 1.1 在App.vue中声明数据list，并传递给子组件TodoMain.vue
// 1.2 使用v-model 绑定勾选状态
// 1.3 使用动态class 根据isDone 来绑定类名

// 目标2：添加数据
// 2.1在TodoHeader.vue 中双向绑定文本框，同时绑定键盘按下事件(.enter 修饰符)
// 2.2 当用户输入内容后按下回车时，将任务名传递给父组件
// 2.3 父组件封装成对象后添加到数组中
// 2.4 在TodoHeader.vue中如果用户输入回车添加数据后，清空文本框
// 2.5 进行非空校验

// 目标3：删除数据
// 3.1在TodoMain.vue 中给删除按钮绑定点击事件，并传入 id
// 3.2利用子传父技术将 id 传递给父组件App.vue
// 3.3在父组件中通过id 找到对应数据的索引，删除数据
// 3.4数据全部删完后再添加需要处理id 的 bug

// 目标4：剩余数量
// 4.1 在App.vue中将list传入TodoFooter.vue
// 4.2在剩余数量处使用插值表达式渲染list.lengtg

// 目标5：数据切换
// 需求1：点谁谁亮
// 5.1定义状态isAll 取值范围all/yes/no
// 5.2给三个a标签绑定动态class，分别判断是自己的状态时才应用selected类名
// 5.3给三个a标签绑定点击事件，点击切换isSel为自己状态
// 需求2：数据切换
// 5.4在TodoFooter中给ul 绑定事件(事件委托)
// 5.5isSel变化时将数据传递给App.vue
// 5.6将子组件传递过来的数据存储在data 中
// 5.7定义计算属性，根据data中的isSel来决定返回什么数据(fikter筛选数据)
// 5.8 修改传递给TodoMain 和TodoFooter 的list为showlist

// 目标6：清除已完成
// 6.1 Todofooter.vue 中给清除已完成标签绑定点击事件
// 6.2 子传父技术，触发父组件的事件，无需传递数据
// 6.3App.vue 中直接操作原数组list，筛选出未完成的任务数组直接覆盖给list

// 目标7：数据缓存
// 7.1在App.vue 中使用watch深度侦听

// 目标8:全选功能
// 需求1：全选影响小选
// 8.1：将list 变化时从App.vue中传给 TodoHeader.vue
// 8.2:定义计算属性isAll,在set方法中同步list中所有的数据 isDone 属性
// 需求2：小选影响全选
// 8.3在get方法中使用every同步所有的勾选状态
// 8.4需要处理无数据的情况

// 1.0 样式引入
import "./styles/base.css";
import "./styles/index.css";

import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem("list") || "[]"),
      isSel: "all",
    };
  },
  methods: {
    addTaskHandler(taskName) {
      let id =
        this.list.length > 0 ? this.list[this.list.length - 1].id + 1 : 100;
      this.list.push({
        id,
        name: taskName,
        isDone: false,
      });
    },
    delTaskHandler(id) {
      let index = this.list.findIndex((item) => item.id === id);
      this.list.splice(index, 1);
    },
    changeTaskHandler(isSel) {
      this.isSel = isSel;
    },
    clearDoneHandler() {
      this.list = this.list.filter((item) => !item.isDone);
    },
  },
  computed: {
    showList() {
      if (this.isSel === "no") {
        return this.list.filter((item) => !item.isDone);
      } else if (this.isSel === "yes") {
        return this.list.filter((item) => item.isDone);
      } else {
        return this.list;
      }
    },
  },
  watch: {
    deep: true,
    headler() {
      localStorage.setItem("list", JSON.stringify(this.list));
    },
  },
};
</script>